From fc39c32324ffe802cb11d78eb7bd329efc8bef35 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Thu, 11 Jul 2024 14:23:04 -0230 Subject: [PATCH] lookingGlass: Clean up the stylesheet and improve visuals overall - shuffle stylesheet around for readability - change names and classes of elements to be consistent - added style classes to window list elements so they can be styled - make sure all elements follow OSD style even in light theme - clean out some old styles Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7746 Part-of: --- .../widgets/_looking-glass.scss | 220 +++++++++++++----- js/ui/lookingGlass.js | 29 ++- 2 files changed, 177 insertions(+), 72 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index d7583b480..fa0a5f95d 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -1,5 +1,35 @@ /* Looking Glass */ +// common +.lg-dialog { + + StEntry { + @extend %osd_entry; + min-height: to_em(22px); + } + + // override link color since OSD style + $lg_link_color: st-lighten(-st-accent-color, 20%); + .shell-link { + color: $lg_link_color; + &:hover { color: st-lighten($lg_link_color, 10%); } + &:active { color: st-darken($lg_link_color, 10%); } + } + + .actor-link { + @extend %monospace; + color: st-darken($osd_fg_color, 20%); + &:hover { color:$osd_fg_color; } + &:active { color: st-lighten($osd_fg_color, 20%); } + & StIcon { icon-size: 12px; } + } +} + +.lg-completions-text { + @extend %caption; + font-style: italic; +} + // Dialog #LookingGlassDialog { @@ -40,96 +70,166 @@ } .notebook-tab { - @extend %osd_button; + @extend %osd_button_flat; + background-color: transparent; -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding * 2; padding: $base_padding $base_padding * 2; + &:selected { + @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + } } - - StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } - StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; } } -.lg-dialog { +// Inspector +#LookingGlassPropertyInspector { - StEntry { - @extend %osd_entry; - min-height: to_em(22px); + background-color: $osd_bg_color; + color: $osd_fg_color; + border-radius: $modal_radius; + border: 1px solid $osd_borders_color; + padding: $base_padding * 2; + + @if $contrast == 'high' { + border-color: $hc_inset_color; } - .shell-link { - color: $link_color; - &:hover { color: st-lighten($link_color, 10%); } - &:active { color: st-darken($link_color, 10%); } - } + .lg-obj-inspector-title { + @extend %heading; + spacing: $base_margin; + } - .actor-link { - color: $insensitive_fg_color; - &:hover { color: lighten($insensitive_fg_color, 20%); } - &:active { color: darken($insensitive_fg_color, 20%); } + .lg-obj-inspector-close-button, + .lg-obj-inspector-button { + @extend %osd_button; + padding: $base_padding $base_padding * 2; + } - & StIcon { icon-size: 12px; } - } + .lg-obj-inspector-close-button { + margin: $base_margin; + padding: $base_padding; + border-radius: $forced_circular_radius; + > StIcon { + icon-size: $base_icon_size; + } + } } -.lg-completions-text { - @extend %caption; - font-style: italic; + +// Evaluator +#LookingGlassEvaluator { + padding: $base_padding; + + .evaluator-results { + @extend %monospace; + spacing: $base_padding; + } } -.lg-obj-inspector-title { +// Window List +#LookingGlassWindows { + + padding: $base_padding; spacing: $base_padding; -} -.lg-obj-inspector-button { - border: 1px solid $borders_color; - padding: 4px; - border-radius: $base_border_radius; - &:hover { border: 1px solid $fg_color; } -} + .lg-window { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + padding: $base_padding * 2; + + .lg-window-name { + @extend %heading; + } -#EvalBox { - @extend %monospace; + .lg-window-props-box { + .lg-window-props { + } + } + } } // Extensions -#lookingGlassExtensions { padding: $base_padding; } +#LookingGlassExtensions { -.lg-extensions-list { - padding: $base_padding; - spacing: $base_padding; -} + .lg-extensions-list { + padding: $base_padding; + spacing: $base_padding; + } -.lg-extension { - @extend %card; -} + .lg-extension { + @extend %card_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true); + margin: 0; + spacing: $base_margin; + padding: $base_padding * 2; -.lg-extension-name { - @extend %heading; -} + .lg-extension-name { + @extend %heading; + color: $osd_fg_color !important; + } -.lg-extension-meta { - spacing: $base_padding; + .lg-extension-description { + } + + .lg-extension-meta { + spacing: $base_padding * 2; + } + } + + .lg-extensions-none { + @extend %title_4; + color: transparentize($osd_fg_color, 0.5); + } } -// Inspector -#LookingGlassPropertyInspector { - background: $bg_color; - border: 1px solid $borders_color; - border-radius: $base_border_radius; +// Actors +#LookingGlassActors { padding: $base_padding; + spacing: $base_margin; } -.lg-debug-flag-button { - StLabel { padding: $base_padding, 2 * $base_padding; } +// Debug +#LookingGlassDebugFlags { - color: $osd_fg_color; - &:hover { color: lighten($osd_fg_color, 20%); } - &:active { color: darken($osd_fg_color, 20%); } -} + .lg-debug-flags-header { + padding: $base_padding; + padding-top: 2 * $base_padding; + @extend %title_4; + } -.lg-debug-flags-header { - padding-top: 2 * $base_padding; - padding: $base_padding; - @extend %title_2; + .lg-debug-flag-button { + @extend %osd_button; + padding: $base_padding * 1.5 $base_padding * 2; + margin-bottom: $base_padding; + + StLabel { + @extend %monospace; + font-weight: normal !important; + } + + // switch style overrides since lg is OSD style + .toggle-switch { + @if $contrast == 'high' { + background: transparentize(white, .7); + &:hover { + background: transparentize(white, .6); + } + } @else { + background: transparentize(white, .85); + &:hover { + background: transparentize(white, .8); + } + } + &:checked { + background: -st-accent-color; + color: -st-accent-fg-color; + + &:hover { + background-color: st-lighten(-st-accent-color, 5%); + color: st-lighten(-st-accent-fg-color, 5%); + } + } + } + } } diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js index e48306090..ef40d7e5b 100644 --- a/js/ui/lookingGlass.js +++ b/js/ui/lookingGlass.js @@ -333,7 +333,7 @@ class Result extends St.BoxLayout { const WindowList = GObject.registerClass({ }, class WindowList extends St.BoxLayout { _init(lookingGlass) { - super._init({name: 'Windows', vertical: true, style: 'spacing: 8px'}); + super._init({name: 'LookingGlassWindows', vertical: true}); let tracker = Shell.WindowTracker.get_default(); this._updateId = Main.initializeDeferredWork(this, this._updateWindowList.bind(this)); global.display.connect('window-created', this._updateWindowList.bind(this)); @@ -356,17 +356,22 @@ const WindowList = GObject.registerClass({ metaWindow.connect('unmanaged', this._updateWindowList.bind(this)); metaWindow._lookingGlassManaged = true; } - let box = new St.BoxLayout({vertical: true}); + let box = new St.BoxLayout({vertical: true, style_class: 'lg-window'}); this.add_child(box); + + let header = new St.BoxLayout({vertical: true, style_class: 'lg-window-name'}); + box.add_child(header); + let windowLink = new ObjLink(this._lookingGlass, metaWindow, metaWindow.title); - box.add_child(windowLink); - let propsBox = new St.BoxLayout({vertical: true, style: 'padding-left: 6px;'}); + header.add_child(windowLink); + + let propsBox = new St.BoxLayout({vertical: true, style_class: 'lg-window-props-box'}); box.add_child(propsBox); propsBox.add_child(new St.Label({text: `wmclass: ${metaWindow.get_wm_class()}`})); let app = tracker.get_window_app(metaWindow); if (app != null && !app.is_window_backed()) { let icon = app.create_icon_texture(22); - let propBox = new St.BoxLayout({style: 'spacing: 6px; '}); + let propBox = new St.BoxLayout({style_class: 'lg-window-props'}); propsBox.add_child(propBox); propBox.add_child(new St.Label({text: 'app: '})); let appLink = new ObjLink(this._lookingGlass, app, app.get_id()); @@ -435,7 +440,7 @@ class ObjInspector extends St.ScrollView { } button = new St.Button({ - style_class: 'window-close', + style_class: 'lg-obj-inspector-close-button', icon_name: 'window-close-symbolic', }); button.connect('clicked', this.close.bind(this)); @@ -716,7 +721,7 @@ export const Inspector = GObject.registerClass({ const Extensions = GObject.registerClass({ }, class Extensions extends St.BoxLayout { _init(lookingGlass) { - super._init({vertical: true, name: 'lookingGlassExtensions'}); + super._init({vertical: true, name: 'LookingGlassExtensions'}); this._lookingGlass = lookingGlass; this._noExtensions = new St.Label({ @@ -890,7 +895,7 @@ const ActorLink = GObject.registerClass({ _init(actor) { this._arrow = new St.Icon({ icon_name: 'pan-end-symbolic', - icon_size: 8, + icon_size: 12, x_align: Clutter.ActorAlign.CENTER, y_align: Clutter.ActorAlign.CENTER, pivot_point: new Graphene.Point({x: 0.5, y: 0.5}), @@ -938,7 +943,7 @@ const ActorLink = GObject.registerClass({ const ActorTreeViewer = GObject.registerClass( class ActorTreeViewer extends St.BoxLayout { _init(lookingGlass) { - super._init(); + super._init({name: 'LookingGlassActors'}); this._lookingGlass = lookingGlass; this._actorData = new Map(); @@ -1221,7 +1226,7 @@ const DebugFlags = GObject.registerClass( class DebugFlags extends St.BoxLayout { _init() { super._init({ - name: 'lookingGlassDebugFlags', + name: 'LookingGlassDebugFlags', vertical: true, x_align: Clutter.ActorAlign.CENTER, }); @@ -1357,11 +1362,11 @@ class LookingGlass extends St.BoxLayout { toolbar.add_child(emptyBox); toolbar.add_child(notebook.tabControls); - this._evalBox = new St.BoxLayout({name: 'EvalBox', vertical: true}); + this._evalBox = new St.BoxLayout({name: 'LookingGlassEvaluator', vertical: true}); notebook.appendPage('Evaluator', this._evalBox); this._resultsArea = new St.BoxLayout({ - name: 'ResultsArea', + style_class: 'evaluator-results', vertical: true, y_expand: true, }); -- 2.39.5